<template>
  <view class="page">
    <view class="backIcon" @click="goBack"><tn-icon name="left" size="40"></tn-icon></view>
    <view class="cover">
      <swiper
        indicator-dots
        autoplay
        circular
        class="cover-img"
        indicator-color="#cac7bf"
        indicator-active-color="#fff"
      >
        <swiper-item v-for="img in detail.cover">
          <image
            :src="img"
            mode="scaleToFill"
          />
        </swiper-item>
      </swiper>
      <view class="tags">
        <view v-for="(t,i) in detail.tags" :key="i" class="tag">{{ t }}</view>
      </view>
    </view>

    <view class="content">
      <view class="title">
        <text class="t">{{ detail.title }}</text>
      </view>
      <view class="desc">
        {{ detail.description }}
      </view>

      <view class="section-hd">同行的选择：</view>
      <view class="choices">
        <view class="choice-card" v-for="(c,idx) in detail.recommend" :key="idx">
          <view class="cardInfo">
            <view class="img"></view>
          </view>
          <view class="c-title">{{ c.title }}</view>
        </view>
      </view>
    </view>

    <view class="bottom-content">
      <view class="bar-actions">
        <view class="bar-item">
          <tn-icon name="share-square" size="45"></tn-icon>
          <view>分享</view>
        </view>
        <view class="bar-item">
          <tn-icon name="trusty" size="45"></tn-icon>
          <view>关注公众号</view>
        </view>
      </view>
      <button class="consult" @click="consult">课程咨询</button>
    </view>

    <!-- 弹出联系方式 -->
    <view v-if="contactInfo.isShow" class="contact-info">
      <view class="popupBox">
        <view class="info-content">
          <view class="info-title">咨询电话</view>
          <view class="info-phone">{{ contactInfo.phone }}</view>
        </view>
        <view class="close-btn" @click="contactInfo.isShow=false"><tn-icon name="close" :bold="true" size="30"></tn-icon></view>
      </view>
  </view>
  </view>
</template>

<script setup lang="ts">
import { reactive ,ref} from 'vue';
import defaultImg from '../../static/首页/u4.png'

const detail = reactive({
  cover: [defaultImg,defaultImg,defaultImg],
  title: '瑜伽理疗，疗愈身心',
  duration: '75m20s',
  tags: ['标签','标签','标签'],
  description: '人生旅途中免不了会离开一座城市，开启新的生活。今天就让我们在向内探索与慈心冥想中，向过去挥手道别，然后回到当下，清理思绪，感受内在的力量，重整出发。',
  recommend: [
    { tag: '平安', title: '瑜伽理疗，疗愈身心' },
    { tag: '泰康', title: '心灵疗愈,冥想放松' }
  ]
});

const consult = () => {
  contactInfo.value.isShow = true;
};
const contactInfo = ref({
  isShow:false,
  phone:'14567432678'
})

function goBack(){
  uni.navigateBack({ delta: 1 })
}
</script>

<style lang="scss">
.page { position: relative;min-height: 100vh; background: #bab5a9; padding-bottom: 120rpx; }
.backIcon{
  position: fixed;
  z-index: 998;
  top: 60rpx;
  left: 24rpx;
  color: #3b3835;
}
.cover { position: relative; height: 420rpx; }
.cover-img { 
  width: 100%;
  height: 100%;
}
.tags { position: absolute; left: 24rpx; bottom: -24rpx; display: flex; gap: 16rpx; }
.tag { padding: 10rpx 20rpx; background: #1c1c1a; color: #e3e6e5; border-radius: 10rpx; font-size: 24rpx; }

.content { padding: 48rpx 24rpx 24rpx; color: #3b3835; }
.title { display: flex; justify-content: space-between; align-items: center; }
.t { font-size: 34rpx; font-weight: 700; }
.desc { margin-top: 16rpx; line-height: 2; color: #3b3835; font-size: 28rpx;}
.section-hd { margin-top:40rpx;color: #3b3835; font-size: 30rpx; font-weight: 600; margin-bottom: 16rpx; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 20rpx; }
.choice-card { 
  background: transparent; 
  .cardInfo{
    position: relative;
    .img { height: 300rpx; border-radius: 16rpx; background: #d7d7d7; }
  }
  .c-title { margin-top: 12rpx; color: #3b3835;margin-bottom: 200rpx; font-size:28rpx;font-weight: 600;}
}

.bottom-content { 
  box-sizing: border-box;
  width: 100%;
  font-size:34rpx;
  position: fixed;
  left: 0;
  right: 0; 
  bottom: 0;
  background-color: #bab5a9;
  padding: 40rpx 30rpx; 
  display: flex; 
  align-items: center; 

  .bar-actions { 
    display: flex; gap: 40rpx; color: #fff; align-items: center;
    .bar-item { padding: 12rpx 0; display: flex;flex-direction: column; align-items: center; font-size: 28rpx;
      tn-icon { font-size: 40rpx; margin-bottom: 8rpx; }
    }
  }
  
  .consult { flex:1;font-size:35rpx;background: #ffffff; color: #887252; border-radius: 999rpx;margin-left: 40rpx;}
}
.contact-info{
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  .popupBox{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    gap:50rpx;
    width: 80%;
    .info-content{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap:20rpx;
      background-color: #000;
      border-radius: 20rpx;
      width: 100%;
      padding: 40rpx 0;
      color: #fff;
    }
    .close-btn{
      width: 40rpx;
      height: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box; /* 包含 padding 和 border 在设定的宽高内 */
      border-radius: 50%;
      background-color: #fff;
      font-weight: 700;
    }
  }
}
</style>


